<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<input type="button" value="按钮4">
<div>我是div</div>
<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //创建元素对象
    let h=$("<h1>我是h1</h1>");
    //把元素添加到某个元素里面
    $("body").append(h);

    //给按钮添加点击事件
    $("input:eq(1)").click(function () {
//        元素对象.text(); //获取

//        元素对象.text("xxx"); //修改


        //val()取出文本框的值
        //text("xxx")给元素的文本赋值
        //取出文本框的值给到div
        $("div").text($("input:first").val());
        //删除掉h1
        //$("h1").remove();
    })
    $("input:eq(2)").click(function () {
        $("h1").hide();//隐藏
    })
    $("input:eq(3)").click(function () {
        $("h1").show();//显示
    })
    $("input:eq(4)").click(function () {
        $("h1").toggle();//隐藏显示切换
    })


</script>
</body>
</html>